<template>
  <div class="wrap" style="overflow:auto;">
    <div v-for="(item, key) in iframeUrlList" :key="key" class="list-wrap hide" :class="(item.display==='block'&&item.sameId)?'new-index': ''">
      <div class="tab hide" :class="(!item.newWindow&&item.sameId)?'new-index':''">
        <span v-for="(one, index) in item.url" v-if="one.urlItem !== 'newWindow'" class="tab-item" :class="[index === activeNum ? 'active': '']" @click="tabIframeChange(index)">{{one.name}}</span>
        <i class="el-icon-close" @click="hideCdrCallIframe"></i>
      </div>
      <div class="iframe-wrap hide" :class="(!item.newWindow&&item.sameId)?'new-index':''">
        <iframe v-for="(one, index) in item.url" v-if="one.urlItem !== 'newWindow'" :src="one.urlItem" frameborder="0" v-show="one.urlItem !== 'newWindow' && index === activeNum"></iframe>
      </div>
    </div>
  </div>
</template>
<script>
  // 此组件是外呼弹屏对接iframe（当前代码设计支持多个弹屏，功能上可扩展）
    import bus from '@/store/eventBus'
    export default {
      name: 'CallIframe',
      data () {
        return {
          activeNum: 0,
          newWindow: false,
          iframeUrlList: []
        }
      },
      methods: {
        tabIframeChange (index) {
          this.activeNum = index
        },
        fetchData () {
          this.hideCdrCallIframe()
          this.$store.commit('IS_CALL_OUT_INTERFACEBUTTON', {status: false})   //   隐藏嵌入弹屏入口的按钮
          let callSheetId = this.$route.params.id
          this.$store.commit('SET_CUR_CALL_SHEETID', callSheetId)
          let page = document.getElementById('call_out_interface_wrap')
          this.iframeUrlList = []
          // 判断是否有通话id相关的详情
          let sessionIframe = window.sessionStorage.getItem('callOutIframeUrl') || ''
          let iframeUrl = sessionIframe ? JSON.parse(sessionIframe) : []
          if (iframeUrl && iframeUrl.length > 0) {
            for (let m = 0; m < iframeUrl.length; m++) {
              for (let n = 0; n < iframeUrl[m].url.length; n++) {
                iframeUrl[m].url[n].urlItem = iframeUrl[m].url[n].urlItem.replace('http://', '//')
              }
              if (iframeUrl[m].callSheetId === callSheetId) {
                this.activeNum = 0
                let newWindowFlag = true
                for (let n = 0; n < iframeUrl[m].url.length; n++) {
                  if (iframeUrl[m].url[n].urlItem !== 'newWindow') {
                    newWindowFlag = false
                    break
                  }
                }
                if (newWindowFlag) { // 新窗口打开 或者是 newTab
                  iframeUrl[m].newWindow = true
                  iframeUrl[m].display = 'none'
                  iframeUrl[m].sameId = false
                  this.hideCdrCallIframe()
                  this.$store.commit('IS_CALL_OUT_INTERFACEBUTTON', {status: false})
                } else {
                  this.$store.commit('IS_CALL_OUT_INTERFACEBUTTON', {status: true})
                  this.showCdrCallIframe()
                  iframeUrl[m].newWindow = false
                  iframeUrl[m].display = 'block'
                  iframeUrl[m].sameId = true
                }
              } else {
                iframeUrl[m].newWindow = false
                iframeUrl[m].display = 'none'
                iframeUrl[m].sameId = false
              }
              this.iframeUrlList.push(iframeUrl[m])
            }
          }
          if (page) {
            if (this.iframeUrlList.length > 20) { // 判断来电数大于20个的时候，把超出的iframe去掉
              let nodeList = page.getElementsByClassName('list-wrap')
              for (let j = 0; j < nodeList.length; j++) {
                if (j < (this.iframeUrlList.length - 20)) {
                  nodeList[j].innerHTML = ''
                }
              }
            }
          }
          console.log(this.iframeUrlList)
        },
        hideCdrCallIframe () { // 隐藏iframe盒子（配置的url为新窗口或者是新tab时）
          let page = document.getElementById('call_out_interface_wrap')
          if (page) {
            page.style.display = 'none'
          }
        },
        showCdrCallIframe () { // 展示iframe盒子（配置的url为嵌入时）
          let page = document.getElementById('call_out_interface_wrap')
          if (page) {
            page.classList.add('transIn')
            bus.$emit('callOutIframeGoLeft')
            setTimeout(() => { // 延迟展示外盒子，解决特殊情况抖动的问题
              page.style.display = 'block'
            }, 300)
          }
        }
      },
      watch: {
        $route (to, form) {
          if (to.path.split('/')[3] === 'cdr_outbound' && to.params.id) {
            this.fetchData()
          } else { // 切换到其他模块时，隐藏最外面的iframe
            let page = document.getElementById('call_out_interface_wrap')
            if (page) {
              page.style.display = 'none'
            }
          }
        }
      },
      created () {
        this.fetchData()
      }
    }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
  iframe,.wrap,.list-wrap
    width 100%
    height 100%
  .wrap
    position relative
    background-color #fff
  .tab
    font-weight 700
    height 40px
    line-height 40px
    border-bottom 1px solid $c-border2
    .tab-item
      padding-left 20px
      display inline-block
      cursor pointer
    .el-icon-close
      float right
      margin 12px 20px 0 0
      font-size 18px
      cursor pointer
      color $cf-gray6
  .active
    color $c-main
  .iframe-wrap
    height calc(100% - 50px)
    width 100%
  .new-window-text
    color $c-prompt
    text-align center
    font-size 20px
    line-height calc(100vh - 54px)
  .hide
    display none
  .new-index
    display block
</style>

